<template>
    <div class="login">
        <Header>
            <div slot="left">
                <div @click="goBack" class="iconfont icon-fanhuijiantou1" ></div>
            </div>
        </Header>
        <h1 class="title">XX外卖</h1>
        <div class="content">
            <div class="content-tit">
                <div  @click="tabChange(index)" :style="getStyles(index)" class="info" v-for="(item,index) in con" :key="index">{{item}}</div>
            </div>
            <div class="bottom">
                <div  v-if="currentIndex==0">
                    <van-field
                v-model="phone"
                center
                clearable
                label="手机号"
                placeholder="请输入"
                name="phone"
                v-validate="'required|mobile'"   
                :error-message="errors.first('phone')"
                >
                <template #button>
                    <van-button @click='send'
                        :disabled='!isRightPhone||computeTime>0'
                        :class="{right_phone:isRightPhone}" size="small" type="primary">{{computeTime>0?`短信已发送(${computeTime}s)`:"获取验证码"}}</van-button>
                </template>
                    </van-field>
                    <van-field
                    center
                    clearable
                    name="code"
                    v-model="code"
                    label="短信验证码"
                    v-validate="'required'"   
                    :error-message="errors.first('code')"
                    placeholder="请输入短信验证码"
                    >
                    </van-field>
                    <div style="margin: 16px;">
                            <van-button round block type="info" @click="phoneLogin">提交</van-button>
                    </div>
                </div>
                <div v-else>
                    <van-form>
                        <van-field
                            v-model="username"
                            name="用户名"
                            label="用户名"
                            placeholder="用户名"
                            :rules="[{ required: true, message: '请填写用户名' }]"
                        />
                        <van-field
                            v-model="password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="密码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                        />
                        <van-field
                            v-model="captcha"
                            type="text"
                            label="验证码"
                            placeholder="请输入验证码"
                            :rules="[{ required: true, message: '请填写密码' }]"
                        >
                            <div slot="button" >
                                <img src="http://localhost:4000/captcha" ref="captcha" @click="updateCaptcha"/>
                            </div>
                        </van-field>
                        <!-- <template> -->
                            
                        <!-- </template> -->
                        <div style="margin: 16px;">
                            <van-button round block type="info"  @click="passwordLogin">提交</van-button>
                        </div>
                    </van-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Header from 'components/common/HeaderGuide/Header'
import {reqPwdLogin} from '../../request/request'
export default {
    components:{
        Header
      
    },
    mounted () {
       
    },
    data () {
        return {
            con:['短信登录','密码登录'],
            currentIndex:0,
            phone:'',//手机号
            computeTime:0,//倒计时剩余事件
            //用户名
            username:'',
            //密码
            password:'',
            //验证码
            code:'',
            //图形验证码
            captcha:""


        }
    },
    computed:{
        isRightPhone(){
            return /^1\d{10}$/.test(this.phone)
        }
    },
    methods:{

        tabChange(index){
            this.currentIndex=index
        },
        // 样式
        getStyles(index){
            if (this.currentIndex===index) {
                return {'border-bottom':'4px solid pink'}
            }
        },
        //返回
        goBack(){
            this.$router.go(-1)
        },
        // 获取验证码
        send(){
            this.computeTime=10
            //启动循环定时器1s减一
            const id = setInterval(()=>{
                this.computeTime--
                //到0，请定时器
                if (this.computeTime===0) {
                    clearInterval(id)
                }
            },1000)
        },
        //更新图形验证码
        updateCaptcha(){
            // src携带个时间戳
            this.$refs.captcha.src='http://localhost:4000/captcha?time'+Date.now()
        },
        phoneLogin(){},
        async passwordLogin(){
            //表单验证
            const {username,password,captcha} = this

            console.log(username,password,captcha);
            //发请求
            const result = await reqPwdLogin(username,password,captcha)
            // console.log(result);
            if (result.code===0) {
            //     // 保存token
            //     console.log(result);
                const user = result.data
                this.$store.dispatch('saveUser',user)
                this.$router.push('/profile')
                return
            }else{
            //       //登录失败更新下验证码
                this.updateCaptcha()
                this.captcha=''
                this.$toast(`${result.msg}`);
            }
          
        },
        
    }
        
  
    
};

</script>

<style lang="less" scoped>
/deep/ .van-field__label{
    display: flex !important;
    align-items: center !important;
}
img{
    width: 98px;
}
.active{
    border-bottom: 1px solid pink;
}
.van-button--primary {
    background-color: pink;
    border: pink;
}

.login{
    height: 1000px;
    background-color: #fff;
    position: relative;
    z-index: 9;
}
.title{
    text-align: center;
}
.content-tit{
    display: flex;
    justify-content: center;
    .info{
        width: 70px;
        height: 40px;
        line-height: 40px;
        margin-left: 4px;
    }
    
}

.van-button--info{
 background-color: pink;
 border: pink;
}


</style>

